<script setup>
    import { Edit, Delete } from "@element-plus/icons-vue";
    import { ref } from "vue";

    // 引入接口
    import {
        articleCategoryListService,
        addArticleCategoryService,
        editArticleCategoryService,
        deleteArticleCategoryService,
    } from "@/api/article.js";
    // 引入 element-plus 组件
    import { ElMessage, ElMessageBox } from "element-plus";

    const categorys = ref([]);

    // 加载列表
    const getAllCategory = async () => {
        const result = await articleCategoryListService();
        categorys.value = result.data;
    };

    getAllCategory();

    //控制添加分类弹窗
    const dialogVisible = ref(false);

    //添加分类数据模型
    const categoryModel = ref({
        categoryName: "",
        categoryAlias: "",
    });

    // 重置分类模型函数
    const resizeCategoryModel = () => {
        categoryModel.value.categoryAlias = "";
        categoryModel.value.categoryName = "";
    };

    //添加分类表单校验
    const rules = {
        categoryName: [
            { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
        categoryAlias: [
            { required: true, message: "请输入分类别名", trigger: "blur" },
        ],
    };

    // 添加文章分类按钮
    const addArticleCategory = async () => {
        // 调用添加接口方法
        const result = await addArticleCategoryService(categoryModel.value);

        // 消息提示
        ElMessage.success(result.message ? result.message : "添加成功");

        // 关闭添加弹框
        dialogVisible.value = false;

        // 刷新页面
        getAllCategory();
    };

    // 添加编辑弹窗标题模型
    const title = ref("");

    // 展示编辑分类函数
    const showEditDialog = row => {
        dialogVisible.value = true;
        title.value = "编辑分类";

        // 传递分类模型值
        categoryModel.value.categoryName = row.categoryName;
        categoryModel.value.categoryAlias = row.categoryAlias;
        // 扩展 id 属性
        categoryModel.value.id = row.id;
    };

    // 保存编辑分类模型
    const editArticleCategory = async () => {
        // 发送保存编辑分类模型请求
        const result = await editArticleCategoryService(categoryModel.value);
        ElMessage.success(result.message ? result.message : "保存成功");

        // 关闭弹窗
        dialogVisible.value = false;
        // 刷新数据
        getAllCategory();
        // 重置分类模型
        resizeCategoryModel();
    };

    // 删除文章分类
    const deleteArticleCategory = row => {
        ElMessageBox.confirm("你确认删除该分类信息吗？", "温馨提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(async () => {
                const result = await deleteArticleCategoryService(row.id);
                //用户点击了确认
                ElMessage({
                    type: "success",
                    message: result.message ? result.message : "删除成功",
                });

                // 刷新数据
                getAllCategory();
            })
            .catch(() => {
                //用户点击了取消
                ElMessage({
                    type: "info",
                    message: "取消删除",
                });
            });
    };
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>文章分类</span>
                <div class="extra">
                    <el-button
                        type="primary"
                        @click="
                            dialogVisible = true;
                            title = '添加分类';
                            resizeCategoryModel();
                        "
                        >添加分类</el-button
                    >
                </div>
            </div>
        </template>
        <el-table :data="categorys" style="width: 100%">
            <el-table-column label="序号" width="100" type="index">
            </el-table-column>
            <el-table-column
                label="分类名称"
                prop="categoryName"
            ></el-table-column>
            <el-table-column
                label="分类别名"
                prop="categoryAlias"
            ></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button
                        :icon="Edit"
                        circle
                        plain
                        type="primary"
                        @click="showEditDialog(row)"
                    ></el-button>
                    <el-button
                        :icon="Delete"
                        circle
                        plain
                        type="danger"
                        @click="deleteArticleCategory(row)"
                    ></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
    </el-card>

    <!-- 添加/编辑分类弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
        <el-form
            :model="categoryModel"
            :rules="rules"
            label-width="100px"
            style="padding-right: 30px"
        >
            <el-form-item label="分类名称" prop="categoryName">
                <el-input
                    v-model="categoryModel.categoryName"
                    minlength="1"
                    maxlength="10"
                ></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="categoryAlias">
                <el-input
                    v-model="categoryModel.categoryAlias"
                    minlength="1"
                    maxlength="15"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="
                        title === '添加分类'
                            ? addArticleCategory()
                            : editArticleCategory()
                    "
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
    .page-container {
        min-height: 100%;
        box-sizing: border-box;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
</style>
